<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitForm">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="85"
                title-colon>
        <vxe-form-item title="用户名称" field="name" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.name" showWordCount clearable placeholder="请输入用户名称"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="手机号码" field="mobile" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="11" v-model="data.mobile" showWordCount clearable placeholder="请输入手机号码"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="邮箱" field="email" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.email" showWordCount clearable placeholder="请输入邮箱"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="用户账号" field="account" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.account" :showWordCount="!form.updateDisabled.account" clearable
                       :disabled="form.updateDisabled.account" placeholder="请输入用户账号"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="性别" field="sex" span="12" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
              <vxe-option v-for="dict in dictType.sex" :key="dict.value" :label="dict.label"
                          :value="dict.value"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="部门" field="deptId" span="12" :item-render="{}">
          <template #default="{ data }">
            <el-cascader ref="cascaderHandleRef"
                         @change="changeLanguage"
                         v-model="data.deptId" :options="options" filterable
                         :props="{ value: 'id', label: 'name', checkStrictly: true, emitPath: false }" clearable
                         style="width: 100%">
                  <span slot-scope="{node, data}" style="margin-left: -10px;padding-left:10px;display:block;"
                        @click="clickNode($event, node)">{{ data.name }}</span>

            </el-cascader>
          </template>
        </vxe-form-item>
        <vxe-form-item title="状态" field="status" span="12" :item-render="{}" reset-value="F">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.status">
              <vxe-radio v-for="dict in dictType.enable_status" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="备注" field="remarks" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-textarea max-length="255" v-model="data.remarks" showWordCount clearable placeholder="请输入备注"
                          rows="6"/>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>


<script>
import addUpdate from '@/mixins/add-update.js';

export default {
  name: 'addUpdateForm',
  mixins: [addUpdate],
  props: {
    dictType: {
      type: Object
    },
  },
  data() {
    return {
      options: [],
      addUrl: '/sysUser',
      updateUrl: '/sysUser',
      byIdUrl: '/sysUser',
      dialog: {
        width: '700px', //定义宽度
      },
      form: {//表单数据
        rules: { //表单验证
          account: [{required: true, message: "用户账号不能为空", trigger: "blur"}],
          status: [{required: true, message: "状态不能为空", trigger: "blur"}],
          sex: [{required: true, message: "性别不能为空", trigger: "blur"}],
          name: [{required: true, message: "用户名称不能为空", trigger: "blur"}],
          email: [
            {
              required: true,
              pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"]
            }
          ],
          mobile: [
            {
              required: true,
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}|200\d{8}|300\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
        },
        updateDisabled: {account: false}, //修改需要禁用的字段
      },
    }
  },
  created() {
    // 局部混入，用于覆写initDialog方法
    const originalInitDialog = this.initDialog; // 保存原始的initDialog方法引用

    this.initDialog = function (params) {
      // 在这里可以添加你自己的逻辑
      this.handleParentDept(params.row)
      originalInitDialog.call(this, params);
    };
  },
  methods: {
    clickNode($event, node) {
      $event.target.parentElement.parentElement.firstElementChild.click();
    },
    changeLanguage(node) {
      // 选中最后一级，下拉框收缩
      if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
        this.$refs.cascaderHandleRef.dropDownVisible = false;
      }
    },
    //处理上级部门
    handleParentDept(row) {
      let id = null
      if (row && row.id) {
        id = row.id
      }
      let config = {
        url: "/sysDept/tree",
        method: 'post',
        data: {id: id}
      }
      this.axios(config).then(res => {
        this.options = res.data
      })
    },
  }
}
</script>
